<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>登录/注册</title>

  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }

    .login-body {
      background: url("./assets/images/back.png") no-repeat;
      background-position: center;
      height: 100vh;
      display: flex;
      justify-content: center;
      position: relative;
    }

    .login-card {
      position: absolute;
      top: 50%;
      transform: translateY(-70%);
      background-color: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      width: 360px;
    }

    .header {
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #ccc;
    }

    .title {
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }

    .form-space {
      padding: 10px;
      display: flex;
      justify-content: center;
    }

    #loginForm {
      margin-block-end: 0;
    }

    label {
      display: block;
      font-size: 14px;
      margin-bottom: 5px;
      color: #555;
    }

    .input-container {
      position: relative;
      margin-right: 10px;
    }

    .icon {
      position: absolute;
      width: 16px;
      height: 16px;
      opacity: 0.5;
      left: 8px;
      top: 50%;
      transform: translateY(-78%);
    }

    .input-container input {
      width: 100%;
      height: 30px;
      line-height: 25px;
      margin-bottom: 10px;
      padding-left: 30px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }

    #imgCode {
      cursor: pointer;
      width: 90px;
      height: 30px;
    }

    .code-container {
      display: flex;
      width: calc(100% - 10px);
      margin-bottom: 10px;
    }

    button {
      width: 100%;
      padding: 8px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-top: 10px;
    }

    button:hover {
      background-color: #0056b3;
    }

    /* 去除父级样式 */
    #no-account {
      display: initial;
    }

    .box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      padding-left: 30px;
      padding-right: 30px;
      margin-bottom: 20px;
    }

    .box .remember-me {
      display: flex;
      align-items: center;
      margin-right: 10px; /* 设置右侧间距 */
    }

    #checkbox {
      width: 16px; /* 设置复选框宽度 */
      margin: 0; /* 设置复选框与文本间的间距 */
    }

    .link {
      display: inline-block;
    }

    #back-login {
      display: initial;
    }

    #back-login {
      display: none;
    }

    #sign-button {
      display: none;
    }
  </style>
</head>

<body>
<div class="login-body">
  <div class="login-card">
    <div class="header">
      <span class="title">天天向上</span>
    </div>
    <div class="form-space">
      <form id="loginForm">
        <div>
          <label for="id">学号：</label>
          <div class="input-container">
            <input type="text" id="id" name="id" required placeholder="请输入学号">
            <img src="assets/images/用户.png" alt="用户图标" class="icon"></img>
          </div>
        </div>
        <div>
          <label for="password">密码：</label>
          <div class="input-container">
            <input type="password" id="password" name="password" required placeholder="请输入密码">
            <img src="assets/images/密码.png" alt="密码图标" class="icon"></img>
          </div>
        </div>
        <div id="check-pwd" style="display: none">
          <label for="password1">确认密码：</label>
          <div class="input-container">
            <input type="password" id="password1" name="password1" placeholder="请确认密码">
            <img src="assets/images/密码.png" alt="密码图标" class="icon"></img>
          </div>
        </div>
        <label for="code">验证码：</label>
        <div class="code-container">
          <div class="input-container">
            <input type="text" id="code" name="code" required placeholder="请输入验证码" autocomplete="off">
            <img src="assets/images/验证码.png" alt="验证码图标" class="icon">
          </div>
          <img src="" alt="验证码图片" id="imgCode" onclick="changeImg()">
        </div>
        <button id="login-button" onclick="login()">登录</button>
        <button id="sign-button" onclick="login()">注册</button>
      </form>
    </div>
    <div id="no-account">
      <div class="box">
        <div class="remember-me">
          <input id="checkbox" type="checkbox">
          <span>记住我</span>
        </div>
        <a class="link" href="javascript:void(0)" onclick="change()">新用户注册</a>
      </div>
    </div>
    <div id="back-login">
      <div class="box">
        <a class="link" href="javascript:void(0)" onclick="change()">返回登录</a>
      </div>
    </div>
  </div>
</div>

<script>
  window.onload = function () {
    changeImg()
  }

  function changeImg() {
    var codeImg = document.getElementById('imgCode')
    codeImg.src = 'code' + "?" + new Date().getTime()
  }

  var isLogin = true

  function change() {
    isLogin = !isLogin
    changeImg()
    var noAccount = document.getElementById('no-account')
    var loginBtn = document.getElementById('login-button')

    var checkPwd = document.getElementById('check-pwd')
    var backLogin = document.getElementById('back-login')
    var signBtn = document.getElementById('sign-button')
    if (isLogin) {
      noAccount.style.display = 'block'
      loginBtn.style.display = 'block'
      checkPwd.style.display = 'none'
      backLogin.style.display = 'none'
      signBtn.style.display = 'none'
    } else {
      noAccount.style.display = 'none'
      loginBtn.style.display = 'none'
      checkPwd.style.display = 'block'
      backLogin.style.display = 'block'
      signBtn.style.display = 'block'
    }
  }

  function validateForm() {
    var password = document.getElementById('password').value;
    var password1 = document.getElementById('password1').value;

    if (password !== password1) {
      alert('密码和确认密码不匹配！');
      return false;
    }
    return true; // 允许表单提交
  }

  document.getElementById('loginForm').addEventListener('submit', function (evt) {
    evt.preventDefault()
  })

  function login() {
    var formData = new FormData(document.getElementById('loginForm'))

    var xhr = new XMLHttpRequest()

    if (isLogin) {
      xhr.open('POST', 'account?type=1', true)
    } else {
      if (validateForm()) {
        xhr.open('POST', 'account?type=0', true)
      } else {
        return
      }
    }

    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.responseType = 'json'

    xhr.send('id=' + formData.get('id') + '&password=' + formData.get('password') +
      '&code=' + formData.get('code'))

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        const res = xhr.response
        if (res.code === 200) {
          if (res.msg === '登录成功') {
            loadCourses()
            window.location.href = 'Index.jsp'
          } else {
            window.location.href = 'Login.jsp'
          }
        } else {
          alert(res.msg)
        }
      }
    }
  }

  function loadCourses() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'course' + '?' + new Date().getTime(), true)

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var res = xhr.response
        if (res.code !== 200) {
          alert("课程信息获取失败")
        }
      }
    }

    xhr.responseType = 'json'
    xhr.send()
  }
</script>
</body>
</html>
